<template>
  <div class="test">
    <h1 class="test-h1">学习使用scss语法</h1>
  </div>
</template>

<script>
export default {

}
</script>

<style lang="scss" scoped>
// 1、必须给style标签上添加lang属性并值为scss，才能使用scss的语法
// 通过$声明全局变量
$highLight-color: red;
// 通过@mixin声明代码块
@mixin box {
    width: 200px;
    height: 200px;
    border: 1px solid #666;
    border-radius: 20px;
}
.test{
    @include box; // 使用代码块
    .test-h1{
        font-size: 20px;
        color: #666;
        // &符号 表示的就是h1标签
        &:hover{
            $backgourndColor: green; // 局部变量
            color: $highLight-color;
            background-color: $backgourndColor;
        }
    }
}
</style>
